<!doctype html>
<html>
  <head>
    <title>Chat demo</title>
		<style type="text/css">
#controls {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 0.5em;
	display: block;
}

#message {width: 80%;}

#log {
  font-family: helvetica, arial, sans-serif;
  font-size: .8em;
  padding-bottom: 40px;
}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
		<div id="log"></div>
	  <div id="controls">
	    <hr />
	    <input type="text" id="message"/>
	    <input type="button" value="send" id="sendbtn" disabled="disabled">
		</div>
    <script type="text/javascript">
var conn;
$(function(){
  var history = [], idx = 0;
  $("#message").focus();

  $(window).bind("focus", function(){
    $("#message").focus();
  });

  var logpanel = $("#log");

  function sendmsg(){
    if(conn && conn.readyState == 1){
      var msg = $("#message").val();
      history.unshift(msg);
      conn.send(msg);
      idx = 0;
      $("#message").val("");
    }
  };

  $("#sendbtn").bind("click", function(){
    sendmsg();
  });

  $("#message").bind("keydown", function(e){
    if(e.which == 13){
      sendmsg();
    }
  })

  function scrollToBottom() {
      window.scrollBy(0, document.body.scrollHeight - document.body.scrollTop);
  };

  function log(data){
    logpanel.append("<p>"+data+"</p>");
    scrollToBottom();
  };

  if (window["WebSocket"]) {
    conn = new WebSocket("ws://"+document.location.host+"/");

    conn.onmessage = function(evt) {
      log(evt.data);
    };

    conn.onclose = function() {
      log("** you have been disconnected");
    };

    conn.onopen = function(){
      log("** you have been connected");
      $("#sendbtn").removeAttr("disabled");
    }
  }
});
    </script>
  </body>
</html>